<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
    <ui:define name="head">                       
        <script type="text/javascript">
            //<![CDATA[
function handleMessage(data) {
    var tweets = data.results;
    var tweetsContent = $(PrimeFaces.escapeClientId('tweetForm:content'));
    
    tweetsContent.html('');
    
    for(var i = 0; i < tweets.length; i++) {
        var tweet = tweets[i],
        markup = '<li>';
        markup += '<img src="' + tweet.image + '"></img>';
        markup += '<strong>' + tweet.from_user + '</strong><br />' + tweet.text;
        markup += '</li>';
        tweetsContent.append(markup);        
    }
    tweetsContent.scrollTop(0);
}

setTimeout(function() {
    init();
}, 3000);
            //]]>
        </script>
    </ui:define>

	<ui:define name="content">

			<h1 class="title ui-widget-header ui-corner-all">PrimePush - Twitter</h1>
			<div class="entry">
			<p>Broadcasts can be delayed using <i>delay</i> feature and configured to run at periodic intervals using <i>schedule</i> feature. 
            This samples demonstrates a scheduled push to every connected client in every 10 seconds.</p>
  
            <h:form id="tweetForm">                
                
                <p:panel header= "Twitter Search for 'I'">
                <p:outputPanel id="content" style="width:100%;height:200px;overflow:auto"/>                
                </p:panel>
                
                <p:remoteCommand name="init" actionListener="#{twitterSearchView.start}" global="false"/>
            </h:form>
                
            <p:socket onMessage="handleMessage" channel="/twitter" />
            
            <h3>Source</h3>
            <p:tabView>
                <p:tab title="twitterSearch.xhtml">
                    <pre name="code" class="xml">
&lt;h:form id="tweetForm"&gt;                

    &lt;p:panel header= "Twitter Search for 'I'"&gt;
    &lt;p:outputPanel id="content" style="width:100%;height:200px;overflow:auto"/&gt;                
    &lt;/p:panel&gt;

    &lt;p:remoteCommand name="init" actionListener="\#{twitterSearchView.start}" global="false"/&gt;

&lt;/h:form&gt;

&lt;p:socket onMessage="handleMessage" channel="/twitter" /&gt;

function handleMessage(data) {
    var tweets = data.results;
    var tweetsContent = $(PrimeFaces.escapeClientId('tweetForm:content'));
    
    tweetsContent.html('');
    
    for(var i = 0; i &lt; tweets.length; i++) {
        var tweet = tweets[i],
        markup = '&lt;li&gt;';
        markup += '&lt;img src="' + tweet.image + '" &gt;&lt;/img&gt;';
        markup += '&lt;strong&gt;' + tweet.from_user + '&lt;/strong&gt;&lt;br /&gt;' + tweet.text;
        markup += '&lt;/li&gt;';
        tweetsContent.append(markup);        
    }
    tweetsContent.scrollTop(0);
}
                    </pre>
                </p:tab>
                
                <p:tab title="TwitterSearchView.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.List;
import java.util.concurrent.Callable;
import java.util.concurrent.TimeUnit;
import org.primefaces.examples.service.TwitterAPIService;
import org.primefaces.examples.service.TwitterService;
import org.primefaces.json.JSONArray;
import org.primefaces.json.JSONObject;
import org.primefaces.push.PushContext;
import org.primefaces.push.PushContextFactory;
import twitter4j.Status;

public class TwitterSearchView {

    private boolean active;
    private TwitterService twitterService = new TwitterAPIService();

    public boolean isActive() {
        return active;
    }

    public void setActive(boolean active) {
        this.active = active;
    }

    public void start() {
        if(!active) {

            PushContext context = PushContextFactory.getDefault().getPushContext();

            context.schedule("/twitter", new Callable&lt;String&gt;() {
                
                private String results;

                public String call() throws Exception {
                    
                    List&lt;Status&gt; tweets = twitterService.asyncSearch("I");
                    if (tweets != null) {
                        JSONObject jSONObject = new JSONObject();
                        JSONArray jSONArray = new JSONArray();
                        for (Status t : tweets) {
                            JSONObject j = new JSONObject();
                            j.put("from_user", t.getUser().getName());
                            j.put("text", t.getText());
                            j.put("image", t.getUser().getMiniProfileImageURL());
                            jSONArray.put(j);
                        }
                        jSONObject.put("results", jSONArray);

                        results = "{\"data\":"+jSONObject.toString()+"}";
                    }                    
                    
                    return results;
                }

            }, 10, TimeUnit.SECONDS);

            active = true;
        }
    }
}
                    </pre>
                </p:tab>
            </p:tabView>
		
		</div>
	</ui:define>
</ui:composition>
